<template>
  <div ref="piechart1" style="width: 100%; height: 200px"></div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  data() {
    return {}
  },
  mounted() {
    this.initPie()
  },
  methods: {
    initPie() {
      // 基于准备号的dom，初始化echarts实例
      const myChart = echarts.init(this.$refs.piechart1)
      const option = {
        // 标题
        // title: {
        //   text: '饼图示例123'
        // },
        // 文本样式
        textStyle: {
          fontSize: 12
        },
        // 图表的工具栏
        toolbox: {
          show: true,
          // 预设
          feature: {
            mark: {
              show: true
            },
            // 数据预览 - 变成另外一种风格预览
            dataView: {
              show: true,
              readOnly: false
            },
            // 把数据从饼图切换为下拉展示数据的形式
            magicType: {
              show: true,
              type: ['pie', 'funnel']
            },
            // 重置
            restore: {
              show: true
            },
            // 保存为图片
            saveAsImage: {
              show: true
            }
          }
        },
        // 工具提示 鼠标经过盒子显示
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br />{b}: {c} ({d}%)'
        },
        // 显示对应数据展示的项
        legend: {
          orient: 'vertical',
          x: 'left',
          data: ['支持', '辞职']
        },
        // x 坐标轴信息
        // xAxis: {
        //   data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        // },
        // y 坐标轴的信息
        // yAxis: {},
        // ***** 核心数据
        series: [
          {
            name: '访问来源',
            type: 'pie',
            selectedMode: 'single',
            radius: [0, '75%'],
            label: {
              normal: {
                show: true,
                formatter: '{b}({d}%)',
                position: 'inner'
              }
            },
            data: [
              {
                value: 175,
                name: '支持',
                selected: true
              },
              {
                value: 352,
                name: '辞职'
              }
            ]
          }
        ]
      }
      // 绘制图表
      myChart.setOption(option)
    }
  }
}
</script>

<style lang="less" scoped></style>
